<template>
  <div class="home-box">
    <!-- 导航栏 -->
    <van-nav-bar fixed class="page-nav-bar">
      <van-button to="/search" class="search_btn" slot='title' icon="search" square type="primary">搜索</van-button>
    </van-nav-bar>
    <!-- /导航栏 -->
    <!-- 顶部标签页 -->
    <van-tabs animated swipeable class='my-channels' v-model="active">
      <van-tab v-for="item in channels" :key="item.id" :title="item.name">
        <artcile-list :channels='item' />
      </van-tab>
      <div slot="nav-right" class="placeholder">
      </div>
      <div slot="nav-right" class="hamburger-btn">
        <i @click="isChannelEditShow = true" class="toutiao toutiao-gengduo"></i>
      </div>
    </van-tabs>
    <!-- 编辑频道弹出层 -->
    <van-popup closeable close-icon-position="top-left" v-model="isChannelEditShow" position="bottom" :style="{ height: '90%' }">
      <Channeledit @updateActive='onUpdateActive' :my-channels='channels' :active='active' />
    </van-popup>
  </div>
</template>

<script>
import { getUserChannels } from '@/api/user.js'
import Articlelist from './components/Articlelist.vue'
import Channeledit from './components/Channel-edit.vue'
import { mapState } from 'vuex'
import { getItem } from '@/utils/storage.js'
export default {
  name: 'home',
  data () {
    return {
      active: 0,
      channels: [],
      isChannelEditShow: false
    }
  },
  computed: {
    ...mapState(['user'])
  },
  components: {
    'artcile-list': Articlelist,
    Channeledit
  },
  created () {
    this.loadChannels()
  },

  methods: {
    async loadChannels () {
      try {
        // 未登录 且 本地有数据
        const localData = getItem('TOKEN_CHANNELS')
        if (!this.user && localData) {
          this.channels = localData
          return
        }
        const { data: res } = await getUserChannels()
        this.channels = res.data.channels
      } catch (err) {
        this.$toast.fail('获取数据失败!')
      }
    },
    onUpdateActive (e, isShowChannelEdit) {
      this.active = e
      this.isChannelEditShow = isShowChannelEdit
    }
  }
}
</script>

<style scoped lang='less'>
  .home-box {
    padding-bottom: 100px;
    padding-top: 174px;
    /deep/.van-nav-bar__title {
      max-width: unset;
    }
    .search_btn {
      width: 555px;
      height: 64px;
      background: rgba(255, 255, 255, .2);
      border-radius: 32px;
      border: none;
    }
    // 滚动标签页
    /deep/.my-channels {
      .van-tabs__wrap {
        height: 82px;
        border-bottom: 1px solid #edeff3;
        position: fixed;
        top: 92px;
        z-index: 2;
        width: 100%;
        .van-tabs__nav {
          padding-bottom: 0;
        }
        // 标签
        .van-tab {
          height: 82px;
          min-width: 200px;
          border-right: 1px solid  #edeff3;
          .van-tab__text {
            font-size: 28px;
            color: #777
          }
        }
        // 选中项
        .van-tab--active {
          .van-tab__text {
            font-size: 30px;
            color: #333
          }
        }
        .van-tabs__line {
          width: 31px;
          height: 6px;
          background: #3296fa;
          border-radius: 3px;
          bottom: 8px;
        }
      }
      // 汉堡菜单
      .hamburger-btn {
        width: 66px;
        height: 82px;
        position: fixed;
        right: 0;
        background: rgba(255, 255, 255, .8);
        display: flex;
        justify-content: center;
        align-items: center;
        .toutiao-gengduo {
          font-size: 40px;
        }
        &:before {
          content: '';
          width: 2px;
          height: 82px;
          position: absolute;
          top: 0;
          left: 0;
          background: url(~@/assets/gradient-gray-line.png);
          background-size: contain;
        }
      }
      // 左侧占位
      .placeholder {
        width: 66px;
        flex-shrink: 0;
      }
    }
  }
</style>
